<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>喜马拉雅</title>
    <link rel="stylesheet" href="./css/font.css">
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <header class="x-header">
      <div class="container">
        <a href="#" class="x-header-logo">喜马拉雅</a>
        <nav class="x-header-nav">
          <a href="#" class="nav-item">发现</a>
          <a href="#" class="nav-item">
            频道<span class="iconfont icon-down"></span>
            <div class="channel-layer">
              所有频道<br>
              所有频道<br>
              所有频道<br>
              所有频道<br>
            </div>
          </a>
          <a href="#" class="nav-item">电台</a>
        </nav>
        <div class="x-header-search">
          <form action="#">
            <input type="text" placeholder="专辑/声音/主播" />
            <a href="#" class="btn">
              <span class="iconfont icon-search"></span>
            </a>
          </form>
        </div>
        <div class="x-header-icons">
          <a href="#" class="icons-item">
            <span class="iconfont icon-cloud-upload"></span>
            <span class="tit">上传</span>
          </a>
          <a href="#" class="icons-item">
            <span class="iconfont icon-pic-left"></span>
            <span class="tit">创作中心</span>
          </a>
          <a href="#" class="icons-item">
            <span class="iconfont icon-sound"></span>
            <span class="tit">有声出版</span>
          </a>
          <a href="#" class="icons-item">
            <span class="iconfont icon-desktop"></span>
            <span class="tit">客户端</span>
          </a>
          <a href="#" class="icons-item">
            <img src="./assets/avatar.png" alt="" />
          </a>
        </div>
      </div>
    </header>
    <main class="x-main">
      <div class="container">
        <!-- banner -->
        <div class="banner">
          <ul class="banner-list">
            <li class="banner-item left">
              <a href="#">
                <img src="./assets/banner01.jpg" alt="" />
              </a>
            </li>
            <li class="banner-item">
              <a href="#">
                <img src="./assets/banner02.jpg" alt="" />
              </a>
            </li>
            <li class="banner-item right">
              <a href="#">
                <img src="./assets/banner03.jpg" alt="" />
              </a>
            </li>
          </ul>
        </div>
        <!-- category -->
        <nav class="category">
          <div class="category-top">
            <a href="#" class="top-item">
              <span class="iconfont icon-block top-item-icon"></span>
              <span>频道</span>
            </a>
            <a href="#" class="top-item">
              <span class="iconfont icon-appstore top-item-icon"></span>
              <span>分类</span>
            </a>
            <a href="#" class="top-item">
              <span class="iconfont icon-crown top-item-icon"></span>
              <span>排行</span>
            </a>
          </div>
          <div class="category-sub">
            <div class="category-sub-item">
              <a href="#" class="start">小说</a>
              <a href="#">男频</a>
              <a href="#">女频</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">相声</a>
              <a href="#">郭麒麟</a>
              <a href="#">岳云鹏</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">音乐</a>
              <a href="#">电音</a>
              <a href="#">流行</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">商业</a>
              <a href="#">市场营销</a>
              <a href="#">管理</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">健康</a>
              <a href="#">饮食</a>
              <a href="#">科普</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">科技</a>
              <a href="#">互联</a>
              <a href="#">无人驾驶</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">英语</a>
              <a href="#">听力</a>
              <a href="#">实用</a>
            </div>
            <div class="category-sub-item">
              <a href="#" class="start">头条</a>
              <a href="#">实时快讯</a>
              <a href="#">民生</a>
            </div>
          </div>
        </nav>
        <!-- layout -->
        <section class="layout">
          <!-- 主体内容  -->
          <div class="layout-main">
            <div class="panel">
              <div class="panel-head">
                <h3 class="panel-head-tit">猜你喜欢</h3>
                <a class="panel-head-toggle" href="#">
                  <span class="iconfont icon-sync"></span>
                  <span>换一批</span>
                </a>
              </div>
              <div class="panel-body">
                <ul>
                  <li>
                    <a href="#" class="album-item">
                      <div class="album-item-box">
                        <img class="img" src="./assets/img01.jpg" alt="" />
                      </div>
                      <p class="album-item-tit">奇妙三字经 | 诵读吟唱经典磨耳朵 | 宝宝巴士国学</p>
                      <p class="album-item-aut">宝宝巴士</p>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="album-item">
                      <div class="album-item-box">
                        <img class="img" src="./assets/img02.jpg" alt="" />
                      </div>
                      <p class="album-item-tit">我的世界 小绿的日记</p>
                      <p class="album-item-aut">狙击手小鲁</p>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="album-item">
                      <div class="album-item-box">
                        <img class="img" src="./assets/img03.jpg" alt="" />
                      </div>
                      <p class="album-item-tit">呼呼收音机：传统节日故事</p>
                      <p class="album-item-aut">呼呼收音机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="album-item">
                      <div class="album-item-box">
                        <img class="img" src="./assets/img04.jpg" alt="" />
                      </div>
                      <p class="album-item-tit">小学生必背古诗词75+80首</p>
                      <p class="album-item-aut">同优文化</p>
                    </a>
                  </li>
                  <li>
                    <a href="#" class="album-item">
                      <div class="album-item-box">
                        <img class="img" src="./assets/img05.jpg" alt="" />
                      </div>
                      <p class="album-item-tit">朕|起点爆款历史文｜架空权谋&逆袭成帝|VIP免费有声小说</p>
                      <p class="album-item-aut">伍壹先生</p>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <!-- 侧边栏 -->
          <div class="layout-aside">
            <div class="card">
              <div class="card-head">
                <img class="avatar" src="./assets/avatar.png" alt="" />
                <p class="text">登录一下，让我了解你</p>
              </div>
              <div class="card-info">
                <a href="#" class="login">登 录</a>
              </div>
            </div>
            <div class="download">
              <div class="dl">
                <p class="dl-tit">下载客户端</p>
                <a href="#" class="dl-btn">iPhone</a>
                <a href="#" class="dl-btn">Android</a>
              </div>
              <img src="./assets/hm.jpg" alt="">
            </div>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>
